/**
 * 基础布局文件
 */

/**
 * import { useState, FC } from "react";
 * 这里 useState 是一个实际函数，FC 是一个 类型，这里可能会给我们带来一些困扰。为了解决这个困扰
 * TypeScript 3.8 的版本，提供了一个新的 导入类型的方式
 * import type { FC } from 'react'
 *
 * 参考链接：https://juejin.cn/post/7111203210542448671
 */
import type { FC } from "react";
import React, { useState } from "react";

// 图标组件
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";

// antd 组件
import { Layout, Menu, theme } from "antd";

// 引入 拆分出去的 组件
import Sider from "./components/sider";
import Header from "./components/header";
import Content from "./components/content";

// 引入 basic-layout.css
import "./basic-layout.css";

// <Layout.Header /> <Layout.Sider /> <Layout.Content />
// const { Header, Sider, Content } = Layout;

const BasicLayout: FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  return (
    <Layout id="basic-layout">
      {/* 左侧菜单栏 */}
      <Sider />

      <Layout className="site-layout">
        {/* 头部 */}
        <Header />

        {/* 内容部分 */}
        <Content />
      </Layout>
    </Layout>
  );
};

export default BasicLayout;
